<template>
  <div id="app">
    <h1 style="text-align: center;">这是字体图标组件的测试容器</h1>
    <div class="icons">
      <!-- <Icon type="email" />
      <Icon type="github" />
      <Icon type="code" />
      <Icon type="qq" />
      <Icon type="downArrow" />
      <Icon type="upArrow" />
      <Icon type="about" />
      <Icon type="error" />
      <Icon type="home" />
      <Icon type="right" />
      <Icon type="close" />
      <Icon type="wechat" />
      <Icon type="blog" />
      <Icon type="warn" />
      <Icon type="empty" /> -->

      <!-- 我怎么没想到可以这么写呢？ -->
       <Icon v-for="(name,id) in types" :key="id" :type="name"></Icon>
    </div>
  </div>
</template>

<script>
import Icon, {types} from './index.vue'
export default {
  name: 'App',
  components: {
    Icon
  },
  data() {
    return {
      types
    }
  },
  methods: {
  },
  computed: {
  }
}
</script>

<style scoped lang="less">
// 组件内部提供 名称-container 的类选择器
.icon-container {
  // color: #fb7299;
  font-size: 100px;
}
.icons {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
</style>
